<template>
	<div class="home flex center">
		<!-- <div>home</div>
		<router-link to="/about">about</router-link>
		<router-link to="/404">404</router-link>
		<router-link to="/login">login</router-link>
		<router-link to="/test">test</router-link>
		<router-link to="/test/child">test-child</router-link>
		<router-link to="/ttt">ttt</router-link> -->
		<div class="inner flex col center">
			<div class="logo flex row center">
				<img src="@/assets/logo.png" />
			</div>
			<div class="search flex row center">
				<div class="prefix flex center">
					<i class="el-icon el-icon-search"></i>
				</div>
				<input type="text" class="input fit" v-model="searchValue" />
			</div>
			<div class="menu">
				<div class="menu-list">
					<div v-for="(menuItem, menuIndex) in filterMenuList" :key="'menu-' + menuIndex" class="menu-item">
						<span>{{ menuItem.meta.title }}</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import _ from "lodash"
// @ is an alias to /src

export default {
	name: "Home",
	data() {
		return {
			searchValue: "",
			menuList: [],
			filterMenuList: [],
		}
	},
	watch: {
		"$store.getters.routes": {
			handler(newValue, oldValue) {
				const flatRoutes = routes => {
					const hander = routes => {
						return routes.reduce((total, route) => {
							return [
								...(_.isArray(total) ? total : [total]),
								...[route],
								...(_.isArray(route.children) ? route.children : []),
							]
						})
					}
					return hander(routes)
				}

				this.menuList = _.isArray(newValue)
					? flatRoutes(newValue).filter(route => {
							return _.isPlainObject(route) && _.isPlainObject(route.meta) && route.meta.isShow
					  })
					: []
			},
			deep: true,
			immediate: true,
		},
		menuList: {
			handler(newValue, oldValue) {
				let searchValue = _.isString(this.searchValue) ? this.searchValue.trim().toLowerCase() : ""
				this.filterMenuList = this.menuList.filter(route => {
					return searchValue.length === 0 ? true : route.meta.title.toLowerCase().indexOf(searchValue) !== -1
				})
			},
			deep: true,
			immediate: true,
		},
		searchValue: {
			handler(newValue, oldValue) {
				let searchValue = _.isString(this.searchValue) ? this.searchValue.trim().toLowerCase() : ""
				this.filterMenuList = this.menuList.filter(route => {
					return searchValue.length === 0 ? true : route.meta.title.toLowerCase().indexOf(searchValue) !== -1
				})
			},
			deep: true,
			immediate: true,
		},
	},
}
</script>

<style lang="scss" scoped>
.home {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 12px;
	overflow: auto;

	> .inner {
		width: 100%;
		font-size: $font-1-size;
		color: $font-2-color;

		> .logo {
			box-sizing: border-box;
			width: 100%;
			max-width: 480px;

			> img {
				// display: block;
				// width: 100%;
				// height: 100%;
				max-width: 480px;
				max-height: 6em;
				object-fit: contain;
			}
		}

		> .search {
			box-sizing: border-box;
			width: 100%;
			max-width: 480px;
			height: 3em;
			margin: 3em 0;
			font-size: $font-1-size;
			color: $font-4-color;
			background-color: $transparent-color;
			border: 1px solid $border-1-color;
			border-top-color: $transparent-color;
			border-right-color: $transparent-color;
			border-left-color: $transparent-color;
			border-bottom-color: $border-1-color;
			border-radius: 0;
			overflow: hidden;
			transition: border-color $duration-2, border-radius $duration-2, color $duration-2;

			&:hover {
				color: $font-2-color;
				border-bottom-color: shade($border-1-color, 20%);
			}

			&:focus-within {
				color: $font-2-color;
				border-bottom-color: $primary-color;
				// border-radius: calc(1.5em - 1px);
			}

			> .prefix {
				box-sizing: border-box;
				width: calc(3em - 2px);
				height: 100%;
				font: inherit;
				color: inherit;
				background-color: inherit;
				border: none;
				border-radius: 0;
				outline: none;
			}

			> .input {
				box-sizing: border-box;
				padding: 0 1em 0 0;
				font: inherit;
				color: inherit;
				background-color: inherit;
				border: none;
				border-radius: 0;
				outline: none;
			}
		}

		> .menu {
			box-sizing: border-box;
			width: 100%;
			max-width: 480px;
			min-height: 16em;
		}
	}
}
</style>

